<template>
  <div class=''>
    <!-- <div class="title">{{$t('good.添加商品其他规格（规格）') }} {{ ButtonIndex + '）' }} </div> -->
    <el-collapse v-model="activeNames" @change="handleChange"    >
      <el-collapse-item :title="$t('good.添加商品其他规格（规格）') + ButtonIndex + '）' " name="1">
         <!-- 添加商品其它规格 -->
      <el-form ref="ruleFormRefOther" style="max-width: 100%" :model="ruleFormOther" :rules="rules" label-width="auto"
      label-position="top" class="demo-ruleForm" :size="formSize" status-icon>
      <el-row :gutter="20" class="el-row">
        <el-col :span="12" :xs="24">
          <el-form-item :label="$t('good.商品名称')" prop="name">
            <el-input v-model="ruleFormOther.name" :disabled="editOrViewStatus == 0 ? true : false" maxlength="50"
              :placeholder="$t('good.请输入商品名称')" />
          </el-form-item>
          <el-form-item :label="$t('good.总库存')" prop="stock">
            <el-input v-model="ruleFormOther.stock" type="number" @input="handleInput('stock')" min="1" :disabled="editOrViewStatus == 0 ? true : false"
              maxlength="8" :placeholder="$t('good.请输入库存数量')" />
          </el-form-item>
          <el-form-item :label="$t('good.单品重量')" prop="weight">
            <el-input v-model="ruleFormOther.weight" type="number" min="1" :disabled="editOrViewStatus == 0 ? true : false"
              :placeholder="$t('good.输入（kg）')" />
          </el-form-item>
          <el-form-item :label="$t('good.单价(含增值税发票)')" prop="sell_price">
            <el-input v-model="ruleFormOther.sell_price" type="number" min="1" :disabled="editOrViewStatus == 0 ? true : false"
              :placeholder="$t('good.请输入商品单价')"  ></el-input>
          </el-form-item>
          <!-- <el-form-item :label="$t('good.单品密度')" prop="midu">
            <el-input v-model="ruleFormOther.midu" type="number" min="1" :disabled="editOrViewStatus == 0 ? true : false"
              :placeholder="$t('good.输入（Kg/m³）')" />
          </el-form-item> -->
          <el-form-item :label="$t('good.批发价格')" prop="pf_price">
            <el-input v-model="ruleFormOther.pf_price" @input="handleInput('pf_price')"  :disabled="editOrViewStatus == 0 ? true : false" min="1" type="number"
              :placeholder="$t('good.请输入批发价格')"  > </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item :label="$t('good.商品颜色')" prop="pro_color">
            <el-input v-model="ruleFormOther.pro_color" :disabled="editOrViewStatus == 0 ? true : false"
              :placeholder="$t('good.请输入商品颜色')" />
              <!-- <el-input v-model="ruleFormOther.pro_color_ru" :disabled="editOrViewStatus == 0 ? true : false"
                :placeholder="$t('good.请输入商品颜色')" v-if="locale=='ru'"/> -->
          </el-form-item>
          <el-form-item :label="$t('good.起批数量')" prop="qpsl">
            <el-input v-model="ruleFormOther.qpsl" min="1" @input="handleInput('qpsl')"  :disabled="editOrViewStatus == 0 ? true : false" type="number"
              maxlength="10" :placeholder="$t('good.请输入起批数量')" />
          </el-form-item>
          <el-form-item :label="$t('good.单品体积')" prop="volume">
            <el-input v-model="ruleFormOther.volume" type="number" min="1" :disabled="editOrViewStatus == 0 ? true : false"
            :placeholder="$t('good.输入（m³）')" />
          </el-form-item>
          <!-- <el-form-item :label="$t('good.单价(含增值税发票)')" prop="sell_price_ru">
            <el-input v-model="ruleFormOther.sell_price_ru" type="number" min="1" :disabled="editOrViewStatus == 0 ? true : false"
              :placeholder="$t('good.请输入商品单价（实时汇率 1元=100卢布）')"  > <template #suffix>
                <span>{{ $t('common.卢布') }}</span>
              </template></el-input>
          </el-form-item> -->
          <!-- <el-form-item :label="$t('good.批发价格')" prop="pf_price_ru">

            <el-input v-model="ruleFormOther.pf_price_ru" @input="handleInput('pf_price_ru')" :disabled="editOrViewStatus == 0 ? true : false" min="1"
              type="number" :placeholder="$t('good.请输入商品单价（实时汇率 1元=100卢布）')" > <template #suffix>
                <span>{{ $t('common.卢布') }}</span>
              </template></el-input>

          </el-form-item> -->
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row">
        <el-col :span="24">
          <el-form-item :label="$t('good.商品规格')" prop="productSpecifications">
         <div>
            <el-input v-model="ggName1"  class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数名称')" />
            <el-input v-model="ggValue1" class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数值')" />
         </div>
         <div  v-if="customizeggList.includes(1)">
            <el-input v-model="ggName2"  class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数名称')" />
            <el-input v-model="ggValue2" class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数值')" />
         </div>
         <div v-if="customizeggList.includes(2)">
            <el-input v-model="ggName3"  class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数名称')" />
            <el-input v-model="ggValue3" class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数值')" />
         </div>
         <div v-if="customizeggList.includes(3)">
            <el-input v-model="ggName4"  class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数名称')" />
            <el-input v-model="ggValue4" class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数值')" />
         </div>
         <div v-if="customizeggList.includes(4)">
            <el-input v-model="ggName5"  class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数名称')" />
            <el-input v-model="ggValue5" class="widt120" :disabled="editOrViewStatus == 0 ? true : false" :placeholder="$t('good.自定义参数值')" />
         </div>
         <el-button @click="addcustomizegg()" v-if="editOrViewStatus==0 || customizeggList.length>=5 ?false:true" style="margin-top: 8px;">{{$t('good.+自定义规格（5条）')}}</el-button>
      </el-form-item>
          <el-form-item prop="pics"  class="margin20">
            <div slot="label" class="label2">
              <div class="hei"><span class="reds"> * </span>{{ $t('good.上传其他规格商品主图(中文)') }}</div>
              <div class="wenjian">{{ $t('good.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到7m内') }}</div>
            </div>
            <upload :limit="6" :fieldType="'pics'" :removestate="editOrViewStatus"  :fileLists="fieldListpics" ref="uploadsrefpics"
              @UserFileUrl="UserFileUrl" acceptType="image/*" @DeleterFile="DeleterFile" ></upload>
          </el-form-item>
          <el-form-item prop="pics_ru"  class="margin20">
            <div slot="label" class="label2">
              <div class="hei"><span class="reds"> * </span>{{ $t('good.上传其他规格商品主图(俄文)') }}</div>
              <div class="wenjian">{{ $t('good.支持jpg、jpeg、png格式 最多上传6张 大小单张限制到7m内') }}</div>
            </div>
            <upload :limit="6" :fieldType="'pics_ru'" :removestate="editOrViewStatus"  :fileLists="fieldListpics_ru" ref="uploadspics_ru"
              @UserFileUrl="UserFileUrl" acceptType="image/*"  @DeleterFile="DeleterFile" ></upload>
          </el-form-item>
          <el-form-item prop="video"  class="margin20">
            <div slot="label" class="label">
              <div class="hei"><span class="reds"> * </span>{{ $t('good.上传其他规格商品视频') }}</div>
              <div class="wenjian">{{ $t('merchantInfo.支持mp4、mvb、AVI格式大小限制在35m内') }}</div>
            </div>
            <upload :limit="4" :fieldType="'video'" :videoUrl="videoListvideo" ref="uploadsrefxq_pics"
              :type="'video'" acceptType="video/*"  @UserFileUrl="UserFileUrl" ></upload>
          </el-form-item>
          <el-form-item prop="jj_video"  class="margin20">
            <div slot="label" class="label">
              <div class="hei"><span class="reds"> * </span>{{ $t('good.上传其他规格商品讲解视频') }}</div>
              <div class="wenjian">{{ $t('merchantInfo.支持mp4、mvb、AVI格式大小限制在35m内') }}</div>
            </div>
            <upload  :fieldType="'jj_video'" :videoUrl="videoListjj_video" ref="uploadsrefjj_video"
              :type="'video'" acceptType="video/*"  @UserFileUrl="UserFileUrl"></upload>
          </el-form-item>
          <!-- <el-form-item prop="3D"  class="margin20">
            <div slot="label" class="label2">
              <div class="hei">{{ $t('good.上传3D商品文件') }}</div>
              <div class="wenjian">{{ $t('good.支持dae、glb格式 最多上传3张 大小单张限制到100m内') }}</div>
            </div>
            <upload :limit="6" type="3d" :acceptType="'.glb,.dae'" :fieldType="'3D'" :removestate="editOrViewStatus" :fileLists="fieldList3D"  @DeleterFile="DeleterFile"  ref="uploadsref3D" @UserFileUrl="UserFileUrl">
            </upload>
          </el-form-item>
          <el-form-item  class="margin20">
            <div slot="label" class="label2">
              <div class="hei">{{ $t('good.上传3D商品缩略图') }}</div>
              <div class="wenjian">{{ $t('good.支持jpg、jpeg、png格式 最多上传3张 大小单张限制到3m内') }}</div>
            </div>
            <upload :limit="3" :fieldType="'sd_pic'"  :removestate="editOrViewStatus" :fileLists="fieldListsd_pic"
              @UserFileUrl="UserFileUrl" acceptType="image/*"  ref="uploadsref3Dslt"  @DeleterFile="DeleterFile" >
            </upload>
          </el-form-item> -->
        </el-col>
      </el-row>
      <div class="btns">
            <div v-for="(button, index) in buttons" :key="button.id" class="btnslist" style="margin-top: 10px;">
              <el-button @click="changeButton(index, ruleFormRefOther)" class="ggbtn">{{$t('good.规格')+(index+1) }}</el-button>
              <el-button :disabled="editOrViewStatus == 0 ? true : false" class="ggbtn" @click="removeButton(index)" icon="Delete" />
            </div>
            <el-button type="primary" @click="addButton(ruleFormRefOther)"
              v-if="buttons.length == 10 || editOrViewStatus == 0 ? false : true"   style="margin-top: 10px;">{{ $t('good.添加商品其他规格（最多新增10条）') }}</el-button>
      </div>
    </el-form>
      </el-collapse-item>
    </el-collapse>

    </div>

</template>

<script setup lang="ts">
import upload from "@@/components/Upload/index.vue"
import type { GoodsInfo, GoodsOtherInfo } from "@@/apis/good/type"
import { cloneDeep, forEach } from "lodash-es"
import { Bottom } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import { EpPropMergeType } from "element-plus/es/utils/index.mjs";
const emits = defineEmits(['UserFileUrl', 'getspecificationsForm']);
import { useI18n } from 'vue-i18n';
const {locale,t} = useI18n();//登录国籍
import { inject } from 'vue'
const CL: any = inject("$CL");
const props = defineProps({
  otherDetailList: {
    type: Array,
    default: []
  },
  editOrViewStatus: {
    type: Number,
    default: '-1'
  },
})
//其它规格表单
const DEFAULT_FORM_DATAOther: GoodsOtherInfo = {
  name: '',
  weight: '',
  midu: '',
  pro_color: '',
  sell_price: '',
  pf_price: '',
  pf_price_ru: '',
  stock: '',
  volume: '',
  sell_price_ru: '',
  qpsl: '',
  pics: '',
  pics_ru: '',
  video: '',
  jj_video: '',
  sd_pic:'',
  '3D': '',
  params:'',
}
const rules = {
  name: [{ required: true, message: t('good.请输入商品名称'), trigger: 'blur' },],
  weight: [{ required: true, message:  t('good.输入（kg）'), trigger: 'blur' },],
  // midu: [{ required: true, message: t('good.输入（Kg/m³）'), trigger: 'blur' },],
  pro_color: [{ required: true, message: t('good.请输入商品颜色'), trigger: 'blur' },],
  sell_price: [{ required: true, message: t('good.请输入商品单价'), trigger: 'blur' },],
  // sell_price_ru: [{ required: true, message:t('good.请输入商品单价'), trigger: 'blur' },],
  qpsl: [{ required: true, message: t('good.请输入起批数量'), trigger: 'blur' },],
  pf_price: [{ required: true, message: t('good.请输入商品单价'), trigger: 'blur' },],
  // pf_price_ru: [{ required: true, message: t('good.请输入商品单价（实时汇率 1元=100卢布）'), trigger: 'blur' },],
  stock: [{ required: true, message: t('good.请输入库存数量'), trigger: 'blur' },],
  volume: [{ required: true, message:t('good.输入（m³）'), trigger: 'blur' },],
  pics: [{ required: true, message: t('good.商品主图 (中文)不能为空'), trigger: 'change' },],
  pics_ru: [{ required: true, message: t('good.商品主图 (俄文)不能为空'), trigger: 'change' },],
  video: [{ required: true, message: t('good.商品视频不能为空'), trigger: 'change' },],
  jj_video: [{ required: true, message: t('good.讲解视频不能为空'), trigger: 'change' },],
  '3D': [{ required: false, message: t('good.3D商品展示图不能为空'), trigger: 'change' },],

}
const ruleFormRefOther = ref<FormInstance>()
const buttons = ref([
  { id: 1, label: "规格" }
])
const formSize = ref <EpPropMergeType<StringConstructor, 'default' | 'small' | 'large', unknown>>('default')
//规格数据

const specificationsForm = ref<any[]>([])

const ruleFormOther = ref<GoodsOtherInfo>(cloneDeep(DEFAULT_FORM_DATAOther))
// 自定义规格
const customizeggList=ref<number[]>([])
const Buttonstate=ref(false)
let ggindex=0
const ggName1=ref('')
const ggValue1=ref('')
const ggName2=ref('')
const ggValue2=ref('')
const ggName3=ref('')
const ggValue3=ref('')
const ggName4=ref('')
const ggValue4=ref('')
const ggName5=ref('')
const ggValue5=ref('')
const addcustomizegg=()=>{
  if(ggindex==5) return
  if(ggindex==0 && !ggName1.value){
    ElMessage({
    message: t('common.自定义参数名称不能为空'),
    type: 'warning',
    })
    return false
  }else if(ggindex==1 && !ggName2.value){
    ElMessage({
    message: t('common.自定义参数名称不能为空'),
    type: 'warning',
    })
    return false
  }else if(ggindex==2 && !ggName3.value){
    ElMessage({
    message: t('common.自定义参数名称不能为空'),
    type: 'warning',
    })
    return false
  }else if(ggindex==3 && !ggName4.value){
    ElMessage({
    message: t('common.自定义参数名称不能为空'),
    type: 'warning',
    })
    return false
  }else if(ggindex==4 && !ggName5.value){
    ElMessage({
    message: t('common.自定义参数名称不能为空'),
    type: 'warning',
    })
    return false
  }
  ggindex++
  customizeggList.value.push(ggindex)
}

//处理自定义规格数据
const ggchuli=()=>{
  let str = "";
  if(ggName1.value&& ggValue1.value){
    str = ggName1.value+':'+ ggValue1.value;
  }
  if(ggName2.value && ggValue2.value){
    str = str + "," + ggName2.value+':'+ ggValue2.value;
  }
  if(ggName3.value&& ggValue3.value){
    str = str + "," + ggName3.value+':'+ ggValue3.value;
  }
  if(ggName4.value&& ggValue4.value){
    str = str + "," + ggName4.value+':'+ ggValue4.value;
  }
  return str;
}
//文件上传返回不同字段类型
const UserFileUrl = (obj: any) => {
  let type = obj.type
  if (type == 'pics') {
    if (ruleFormOther.value.pics) {
      ruleFormOther.value.pics = ruleFormOther.value.pics.concat(",", obj.url)
    } else {
      ruleFormOther.value.pics = obj.url
    }
  } else if (type == 'pics_ru') {
    if (ruleFormOther.value.pics_ru) {
      ruleFormOther.value.pics_ru = ruleFormOther.value.pics_ru.concat(",", obj.url)
    } else {
      ruleFormOther.value.pics_ru = obj.url
    }
  } else if (type == 'video') {
      ruleFormOther.value.video = obj.url
  } else if (type == 'jj_video') {
      ruleFormOther.value.jj_video = obj.url
  } else if (type == '3D') {
    if (ruleFormOther.value['3D']) {
      ruleFormOther.value['3D'] = ruleFormOther.value['3D'].concat(",", obj.url)
    } else {
      ruleFormOther.value['3D'] = obj.url
    }
  }else if (type == 'sd_pic') {
    if (ruleFormOther.value.sd_pic) {
      ruleFormOther.value.sd_pic = ruleFormOther.value.sd_pic.concat(",", obj.url)
    } else {
      ruleFormOther.value.sd_pic = obj.url
    }
  }
};
const DeleterFile = (obj: any) => {
  let type = obj.type
  let list=obj.deleterList
  console.log(obj.deleterList,'删除之后返回的图片数组');
  if (type == 'pics') {
    if (ruleFormOther.value.pics) {
      ruleFormOther.value.pics = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleFormOther.value.pics=''
    }
  } else if (type == 'pics_ru') {
    if (ruleFormOther.value.pics_ru) {
      ruleFormOther.value.pics_ru = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleFormOther.value.pics_ru
    }
  } else if (type == 'pics') {
    if (ruleFormOther.value.pics) {
      ruleFormOther.value.pics = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleFormOther.value.pics=''
    }
  } else if (type == '3D') {
    if (ruleFormOther.value['3D']) {
      ruleFormOther.value['3D'] = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleFormOther.value['3D']=''
    }
  }else if (type == 'sd_pic') {
    if (ruleFormOther.value.sd_pic) {
      ruleFormOther.value.sd_pic = list.map(item => item.response ? item.response.info.url : item.url).join(',');
    }else{
      ruleFormOther.value.sd_pic
    }
  }
}

let deletestate=ref(false)
//编辑查看回显
const removeButton = (index: any) => {
  deletestate.value=true
  if (buttons.value.length == 1){
    activeNames.value=[]
    specificationsForm.value=[]
    // ButtonIndex.value=''
    return false
  }
  buttons.value.splice(index, 1);
  specificationsForm.value.splice(index, 1)
  ButtonIndex.value = buttons.value.length
  addggGoodhuixian(specificationsForm.value.length-1)

}

const activeNames = ref([])//折叠
const handleChange = (val: CollapseModelValue) => {
  console.log(val,!val[0] && !ruleFormOther.value.name && specificationsForm.value.length<2,'折叠状态------')
  if(!val[0] && !ruleFormOther.value.name && specificationsForm.value.length<2){
    activeNames.value=[]
    specificationsForm.value=[]
  }
}

const addggGood = (val:String) => {
  if(val=='1'){
    emits('getspecificationsForm', specificationsForm.value,1)
    return false
  }
  if(props.editOrViewStatus!=1){
    // Index.value=Index.value + 1
    // specificationsForm.value.push(JSON.parse(JSON.stringify(ruleFormOther.value)))
  }else{
    ruleFormOther.value.params=ggchuli()
  }
  if(activeNames.value[0]){
    ruleFormRefOther.value.validate((valid: any, fields: any) => {
      console.log(valid,'validvalid');
      if (!valid) {
         ElMessage.error(t('good.商品信息')+t('merchantInfo.不能为空'))
        return false
      }
      let array=['name']
      let state=ref(true)
      let arr=JSON.parse(JSON.stringify(specificationsForm.value))
      arr.map((item,index)=>{
        array.forEach(ele=>{
          if(!item[ele]){
          ElMessage({
            message: `规格${index+1}必填项不能为空`,
            type: 'warning',
          })
          state.value=false
          return false
        }
        })
      })
      // console.log(specificationsForm.value,'specificationsForm.value修改之后');
      if(!state.value) return
      if (valid) {
       console.log('通过',specificationsForm.value);
       emits('getspecificationsForm', JSON.parse(JSON.stringify(specificationsForm.value)),1)
      } else {
        console.log('error submit!', fields)
        console.log('通过22222',specificationsForm.value);
        emits('getspecificationsForm', JSON.parse(JSON.stringify(specificationsForm.value)))
      }
     })
  }else{
    emits('getspecificationsForm', JSON.parse(JSON.stringify(specificationsForm.value)),1)
  }

}
const ButtonIndex = ref(1)//判断Button数量
const Index = ref(0)//当前规格数据下标
const uploadsrefpics = ref<InstanceType<typeof upload>>()
const uploadspics_ru = ref<InstanceType<typeof upload>>()
const uploadsrefxq_pics = ref<InstanceType<typeof upload>>()
const uploadsrefjj_video = ref<InstanceType<typeof upload>>()
const uploadsref3D = ref<InstanceType<typeof upload>>()
const uploadsref3Dslt = ref<InstanceType<typeof upload>>()
const init=ref(false)
watchEffect(() => {

  if(deletestate.value==true) return false //删除不执行监听
  if(specificationsForm.value[Index.value]){
    specificationsForm.value[Index.value].name=ruleFormOther.value.name
    specificationsForm.value[Index.value].weight=ruleFormOther.value.weight
    // (obj.info.volume / obj.info.weight).toFixed(1)
    specificationsForm.value[Index.value].midu= (ruleFormOther.value.weight / ruleFormOther.value.volume).toFixed(2)
    specificationsForm.value[Index.value].pro_color=ruleFormOther.value.pro_color
    specificationsForm.value[Index.value].sell_price=ruleFormOther.value.sell_price
    specificationsForm.value[Index.value].pf_price= ruleFormOther.value.pf_price
    specificationsForm.value[Index.value].pf_price_ru= ruleFormOther.value.pf_price_ru
    specificationsForm.value[Index.value].stock=ruleFormOther.value.stock
    specificationsForm.value[Index.value].volume=ruleFormOther.value.volume
    specificationsForm.value[Index.value].sell_price_ru=ruleFormOther.value.sell_price_ru
    specificationsForm.value[Index.value].qpsl=ruleFormOther.value.qpsl
    specificationsForm.value[Index.value].pics=ruleFormOther.value.pics
    specificationsForm.value[Index.value].pics_ru=ruleFormOther.value.pics_ru
    specificationsForm.value[Index.value].sd_pic=ruleFormOther.value.sd_pic
    specificationsForm.value[Index.value]['3D']=ruleFormOther.value['3D']
    specificationsForm.value[Index.value].video=ruleFormOther.value.video
    specificationsForm.value[Index.value].jj_video=ruleFormOther.value.jj_video
    specificationsForm.value[Index.value].params= ggchuli()
    // addggGood()
    console.log(specificationsForm.value,'数据变化了==------');
  }else{
    console.log(init.value,'init.valueinit.value');
    ruleFormOther.value.params=ggchuli()
    // if(!init.value){
    //   init.value=true
    //   return
    // }else{
    if(activeNames.value[0]){
      specificationsForm.value.push(JSON.parse(JSON.stringify(ruleFormOther.value)))
      console.log(specificationsForm.value,'存一下');

    }
    // }

  }
});
const resetCustom=()=>{
      ggindex=0
      ggName1.value=''
      ggValue1.value=''
      ggName2.value=''
      ggValue2.value=''
      ggName3.value=''
      ggValue3.value=''
      ggName4.value=''
      ggValue4.value=''
      ggName5.value=''
      ggValue5.value=''
      customizeggList.value=[]
}
//新增规格
const addButton = async (formEl: FormInstance | undefined) => {
  if(ruleFormOther.value.sd_pic && !ruleFormOther.value['3D']){
        ElMessage({
        message: t('good.上传3D商品文件'),
        type: 'warning',
      })
      return false
  }
  if(!ruleFormOther.value.sd_pic && ruleFormOther.value['3D']){
      ElMessage({
      message: t('good.请上传3D商品缩略图'),
      type: 'warning',
      })
      return false
  }
  await formEl.validate((valid: any, fields: any) => {
    if (!valid) {
         ElMessage.error(t('good.商品信息')+t('merchantInfo.不能为空'))
        return
      }
    if (valid) {
        resetCustom()
        deletestate.value=false
        ButtonIndex.value++
        addggGood('0')
        formEl.resetFields()
        customizeggList.value=[]
        uploadsrefpics.value?.clearFiles();
        uploadspics_ru.value?.clearFiles();
        uploadsrefxq_pics.value?.clearFiles();
        uploadsrefjj_video.value?.clearFiles();
        uploadsref3D.value?.clearFiles();
        uploadsref3Dslt.value?.clearFiles();
        ruleFormOther.value.sd_pic=''
        if (buttons.value.length == 10) return
        const newId = buttons.value.length + 1;
            const newButton = {
              id: newId,
              label: `规格`
            };
            // 将新按钮添加到数组中
        buttons.value.push(newButton);
        // Index.value= buttons.value.length-1 //当前需要监听的数据下标
        changeButton(buttons.value.length-1, formEl)
      } else {
        console.log('error submit!', fields)
      }
  })
}
//文件回显
const fieldListpics = ref([])
const fieldListpics_ru = ref([])
const videoListvideo = ref('')
const videoListjj_video = ref('')
const fieldList3D = ref([])
const fieldListsd_pic = ref([])
var indexxxx=1
watch(
  () => props.otherDetailList,
  (newUser, oldUser) => {
    if (newUser && indexxxx==1) {
    indexxxx=2
    let arr = newUser
    for (let i = 0; i < arr.length - 1; i++) {
      const newId = buttons.value.length + 1;
      const newButton = {
        id: newId,
        label: `规格`
      };
      // 将新按钮添加到数组中
      buttons.value.push(newButton);
    }
    specificationsForm.value = newUser
    let index = 0;
    addggGoodhuixian(index)
    }
  },
  { deep: true }
)
watch(
  () => Index.value,
  (newUser, oldUser) => {
    console.log('index变化了----------',newUser);
  },
  { deep: true }
)
//切换规格
const changeButton = (index: any, formEl: FormInstance | undefined) => {
  if( Index.value==index) return false
  deletestate.value=false
  Index.value=index
  uploadsrefpics.value?.clearFiles();
  uploadspics_ru.value?.clearFiles();
  uploadsrefxq_pics.value?.clearFiles();
  uploadsrefjj_video.value?.clearFiles();
  uploadsref3D.value?.clearFiles();
  uploadsref3Dslt.value?.clearFiles();
  ruleFormOther.value.sd_pic=''
  ButtonIndex.value = index + 1
  console.log(ButtonIndex.value,index,'下标----------------------');
  console.log("specificationsForm.value===============", specificationsForm.value)
  formEl!.resetFields()
  resetCustom()
  if (specificationsForm.value[index]) {
    addggGoodhuixian(index)//回显数据
  }
  emits('getspecificationsForm', specificationsForm.value)

}
const addggGoodhuixian = (index: number) => {
  console.log(specificationsForm.value,'切换之后数据');
  if (specificationsForm.value[index]) {
    ruleFormOther.value = JSON.parse(JSON.stringify(specificationsForm.value[index]))
    if (specificationsForm.value[index].pics) {
      let array = specificationsForm.value[index].pics.split(",")
      fieldListpics.value = array.map((item: any, index: any) => ({ ['url']: item }));
      ruleFormOther.value.pics=specificationsForm.value[index].pics
    }
    if (specificationsForm.value[index].pics_ru) {
      let array = specificationsForm.value[index].pics_ru.split(",")
      fieldListpics_ru.value = array.map((item: any, index: any) => ({ ['url']: item }));
      ruleFormOther.value.pics_ru=specificationsForm.value[index].pics_ru
    }
    if (specificationsForm.value[index].sd_pic) {
      let array = specificationsForm.value[index].sd_pic.split(",")
      fieldListsd_pic.value = array.map((item: any, index: any) => ({ ['url']: item }));
      ruleFormOther.value.sd_pic=specificationsForm.value[index].sd_pic
    }
    if (specificationsForm.value[index]['3D']) {
      let array = specificationsForm.value[index]['3D'].split(",")
      fieldList3D.value = array.map((item: any, index: any) => ({ ['url']: item }));
      ruleFormOther.value['3D']=specificationsForm.value[index]['3D']
    }
    videoListvideo.value = ''
    videoListjj_video.value = ''
    videoListvideo.value = specificationsForm.value[index].video
    ruleFormOther.value.video = specificationsForm.value[index].video
    videoListjj_video.value = specificationsForm.value[index].jj_video
    ruleFormOther.value.jj_video = specificationsForm.value[index].jj_video
    //编辑查看切换规格回显
    ruleFormOther.value.name = specificationsForm.value[index][CL('name')]
    ruleFormOther.value.weight = specificationsForm.value[index].weight
    ruleFormOther.value.midu = (specificationsForm.value[index].weight / specificationsForm.value[index].volume).toFixed(2)
    ruleFormOther.value.pro_color = specificationsForm.value[index].pro_color
    ruleFormOther.value.sell_price = specificationsForm.value[index].sell_price
    ruleFormOther.value.pf_price = specificationsForm.value[index].pf_price
    ruleFormOther.value.pf_price_ru = specificationsForm.value[index].pf_price_ru
    ruleFormOther.value.stock = specificationsForm.value[index].stock
    ruleFormOther.value.volume = specificationsForm.value[index].volume
    ruleFormOther.value.sell_price_ru = specificationsForm.value[index].sell_price_ru
    ruleFormOther.value.qpsl = specificationsForm.value[index].qpsl
    //回显自定义规格
    if(specificationsForm.value[index][CL('params')]){
        let ggname=specificationsForm.value[index][CL('params')].split(',')
        ggindex=ggname.length-1
        for (let index = 0; index < ggname.length; index++) {
          if(index==0){
            ggName1.value=ggname[0].split(':')[0]
            ggValue1.value=ggname[0].split(':')[1]
          }else if(index==1){
            ggName2.value=ggname[1].split(':')[0]
            ggValue2.value=ggname[1].split(':')[1]
          }else if(index==2){
            ggName3.value=ggname[2].split(':')[0]
            ggValue3.value=ggname[2].split(':')[1]
          }else if(index==3){
            ggName4.value=ggname[3].split(':')[0]
            ggValue4.value=ggname[3].split(':')[1]
          }else if(index==4){
            ggName4.value=ggname[4].split(':')[0]
            ggValue4.value=ggname[4].split(':')[1]
          }
          customizeggList.value.push(index)
        }
    }
    }else{
      customizeggList.value=[]
    }
}
const handleInput = async (val) => {
  if(val=='qpsl'){
    let value = ruleFormOther.value.qpsl;
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 10) {
      ruleFormOther.value.qpsl = value.slice(0, 10); // 截断超出长度的部分
    }
  }else if(val=='pf_price_ru'){
    let value = ruleFormOther.value.pf_price_ru;
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 10) {
      ruleFormOther.value.pf_price_ru = value.slice(0, 10); // 截断超出长度的部分
    }
  }else if(val=='pf_price'){
    let value = ruleFormOther.value.pf_price;
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 10) {
      ruleFormOther.value.pf_price = value.slice(0, 10); // 截断超出长度的部分
    }
  }else if(val=='limit_start'){
    let value = ruleFormOther.value.limit_start;
    // 确保输入的数字不超过最大长度10
    if (value && value.length > 10) {
      ruleFormOther.value.limit_start = value.slice(0, 10); // 截断超出长度的部分
    }
  }else if(val=='stock'){
    let value = ruleFormOther.value.stock;
    // 确保输入的数字不超过最大长度8
    if (value && value.length > 8) {
      ruleFormOther.value.stock = value.slice(0, 8); // 截断超出长度的部分
    }
  }
}
// 显式导出方法
defineExpose({
  addggGood
});
</script>

<style lang='scss' scoped>
::deep(.el-form-item__content) {
  display: flex !important;
  justify-content: flex-start !important;
}

.reds {
  color: #f56c6c;
  font-size: 14px;
}

.hei {
  width: 200px;
  color: #1D2129;
}

.wenjian {
  width: 150px;
  color: #86909C;
  line-height: 1.7em;
}

.title {
  width: 100%;
  height: 30px;
  color: #1D2129;
}

.m-right {
  margin-right: 10px;
}

.el-row {
  width: 100%;
  color: #86909C
}

.right-aligned {
  display: flex;
  justify-content: flex-end;
}

.label {
  margin-top: -60px;
  margin-right: 20px;
}

.label2 {
  margin-top: -31px;
  margin-right: 20px;
}
.margin20 {
  margin: 70px 0 !important;
}
.btns {
  display: flex;
  flex-wrap: wrap;
  // justify-content: flex-end;
  margin-bottom: 50px;
}

.ggbtn {
  margin: 0;
  background: #FF010B;
  color: #FFFFFF;
  border: 0;
}

.btnslist {
  margin-right: 10px;
  // flex: 1;
  flex-wrap: wrap;

}
.widt120{
  width: 120px;
  margin-right: 10px;
}
 ::v-deep .el-collapse-item__header {
    color: #1D2129; /* 修改为你希望的颜色 */
    font-size: 16px;
}
</style>
